<template>
<!-- 智能锁控-饼图 -->
  <div class="lockcontrol">
      <v-chart :options="option" :auto-resize="true" @click="LockControlClick" />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { EChartOption } from "echarts";
interface dataList {
  name: string;
  value: string | number;
}
let colorList: Array<string> = ["#FF8E1B", "#FC3C2D", "#1466F7"];
@Component
export default class LockControl extends Vue {
  @Prop() datas!:any;
  public dataList: dataList[] = [
    {
      name: "设备告警数",
      value: 0,
    },
    {
      name: "通讯故障数",
      value: 0,
    },
    {
      name: "设备在线数",
      value: 0,
    },
  ];
  public option: EChartOption = {
    tooltip: {
      trigger: "item",
      borderColor: "rgba(255,255,255,.3)",
      backgroundColor: "rgba(13,5,30,.6)",
      borderWidth: 1,
      padding: 5,
      formatter: function (parms: any) {
        var str =
          parms.marker +
          "" +
          parms.data.name +
          "</br>" +
          "数量：" +
          parms.data.value +
          "</br>" +
          "占比：" +
          parms.percent +
          "%";
        return str;
      },
    },
    series: [
      {
        type: "pie",
        center: ["70%", "50%"],
        radius: ["25%", "45%"],
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 15,
        itemStyle: {
          normal: {
            color: function (params: any) {
              return colorList[params.dataIndex];
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        label: {
          show: false,
        },
        data: this.datas,
      },
      {
        type: "pie",
        name: "最外层细圆环",
        hoverAnimation: false,
        // clockWise: false,
        center: ["70%", "50%"],
        radius: ["50%", "50%"],
        itemStyle: {
          normal: {
            borderColor: "#0C4CBF",
            borderWidth: 1,
          },
        },
        label: {
          show: false,
        },
        data: [100],
      },
    ],
  };
  public LockControlClick(val: Object): void {
    // console.log(val);
  }
}
</script>

<style lang="scss" scoped>
.lockcontrol {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>